import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Switch, Button, Card, Typography, InputNumber, Space } from 'antd';
import { Vector, VectorFormValues, VectorStatus, VectorType, VectorIndexType } from '../store/vectorTypes';
import { vectorStore } from '../store/vectorStore';

const { TextArea } = Input;
const { Title } = Typography;

interface VectorFormProps {
  initialValues?: Vector;
  onSubmit: (values: VectorFormValues) => void;
  onCancel: () => void;
}

const VectorForm: React.FC<VectorFormProps> = ({ initialValues, onSubmit, onCancel }) => {
  const [form] = Form.useForm();
  if (initialValues && initialValues.fileFormat) {
    initialValues.fileFormatArray = initialValues.fileFormat.split(',');
  }
  useEffect(() => {
    console.log(initialValues)
    form.resetFields();
    if (initialValues) {
      form.setFieldsValue(initialValues);
    }
  }, [initialValues, form]);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(values);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={initialValues}
      onFinish={handleSubmit}
      style={{ maxHeight: '100%', overflow: 'hidden' }}
    >
      {/* 基本信息卡片 */}
      <Card title="基本信息" style={{ marginBottom: 16 }}>
        <Form.Item
          name="name"
          label="知识库名称"
          rules={[{ required: true, message: '请输入知识库名称' }]}
        >
          <Input placeholder="请输入知识库名称" />
        </Form.Item>

        <Form.Item
          name="description"
          label="知识库描述"
        >
          <TextArea placeholder="请输入知识库描述" rows={4} />
        </Form.Item>

        <Form.Item
          name="baseType"
          label="知识库类型"
          rules={[{ required: false, message: '请选择知识库类型' }]}
        >
          <Select placeholder="请选择知识库类型">
            <Select.Option value="text">文本</Select.Option>
            <Select.Option value="image">图片</Select.Option>
            <Select.Option value="mixed">混合</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="fileFormatArray"
          label="文件格式"
          rules={[{ required: false, message: '请选择文件格式' }]}
        >
          <Select placeholder="请选择文件格式" mode="multiple">
            <Select.Option value="txt">TXT</Select.Option>
            <Select.Option value="pdf">PDF</Select.Option>
            <Select.Option value="doc">DOC</Select.Option>
            <Select.Option value="docx">DOCX</Select.Option>
            <Select.Option value="jpg">JPG</Select.Option>
            <Select.Option value="png">PNG</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="vectorModel"
          label="向量模型"
          rules={[{ required: false, message: '请选择向量模型' }]}
        >
          <Select placeholder="请选择向量模型">
            {vectorStore.modelOptions.map(model => (
              <Select.Option key={model.value} value={model.value}>
                {model.title}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="dimension"
          label="向量维度"
          rules={[{ required: false, message: '请输入向量维度' }]}
        >
          <InputNumber min={128} max={4096} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          name="splitStrategy"
          label="切片策略"
          rules={[{ required: false, message: '请选择切片策略' }]}
        >
          <Select placeholder="请选择切片策略">
            <Select.Option value={0}>固定长度</Select.Option>
            <Select.Option value={1}>语义分割</Select.Option>
            <Select.Option value={2}>自定义</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="maxParagraphSize"
          label="最大段落大小"
          rules={[{ required: false, message: '请输入最大段落大小' }]}
        >
          <InputNumber min={100} max={2000} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          name="maxOverlapSize"
          label="最大重叠大小"
          rules={[{ required: false, message: '请输入最大重叠大小' }]}
        >
          <InputNumber min={0} max={200} style={{ width: '100%' }} />
        </Form.Item>
      </Card>

      {/* 索引设置卡片 */}
      <Card title="索引设置" style={{ marginBottom: 16 }}>
        <Form.Item
          name="indexType"
          label="索引类型"
          rules={[{ required: false, message: '请选择索引类型' }]}
        >
          <Select placeholder="请选择索引类型">
            {Object.values(VectorIndexType).map(type => (
              <Select.Option key={type} value={type}>
                {type}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="indexParams"
          label="索引参数"
          rules={[{ required: false, message: '请输入索引参数' }]}
        >
          <TextArea
            placeholder="请输入索引参数（JSON格式）"
            rows={4}
          />
        </Form.Item>
      </Card>

      {/* 状态设置卡片 */}
      <Card title="状态" style={{ marginBottom: 16 }}>
        <Form.Item
          name="status"
          valuePropName="checked"
          getValueProps={value => ({ checked: value === VectorStatus.ENABLED })}
          getValueFromEvent={checked => (checked ? VectorStatus.ENABLED : VectorStatus.DISABLED)}
        >
          <Switch
            checkedChildren="启用"
            unCheckedChildren="禁用"
          />
        </Form.Item>
      </Card>

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button onClick={onCancel}>
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default VectorForm; 